<template>

  <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" @sort-change="sortChange">
    <el-table-column v-if="index" type="index" width="40px" />
    <el-table-column v-if="checkbox" type="selection" width="42px" />
    <el-table-column v-for="item in column" :key="item.prop" :render-header="item.render_header" :sort-by="item.sort_by" :sortable="item.sort" :prop="item.prop" :label="item.label" :width="item.width">
      <template slot-scope="scope">
        <slot v-if="item.type==='slot'" :name="item.slot_name" :data="scope.row" />
        <component :is="!item.type? 'com-text':`com-${item.type}`" v-else :config="item" :data="scope.row" />
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import request from '@/utils/request'
const modules = {}
const files = require.context('../control', true, /\index.vue$/)
files.keys().forEach(item => {
  const key = item.split('/')
  const name = key[1]
  modules[`com-${name}`] = files(item).default
})
export default {
  name: 'Table',
  components: {
    ...modules
  },
  props: {
    checkList: {
      type: Array,
      default: () => []
    },
    // 列数据
    column: {
      type: Array,
      default: () => []
    },
    // 全选框
    checkbox: Boolean,
    // 序号
    index: Boolean,
    // 回调数据
    onLoad: Boolean,
    // 格式化数据渲染列表
    format: Function,
    // 是否开启自动调用请求数据接口
    initRequset: {
      type: Boolean,
      default: true
    },
    // url地址
    url: {
      type: String,
      default: '',
      require: true
    },
    // 请求方式
    method: {
      type: String,
      default: 'post',
      require: true
    },
    // 数据
    data: {
      type: Object,
      default: () => ({})
    },
    params: {
      type: Object,
      default: () => ({})

    }
  },
  data() {
    return {
      tableData: []
    }
  },
  beforeMount() {
    // 判断是否打开就调用
    this.initRequset && this.getTableList()
  },
  methods: {
    // 复选框
    handleSelectionChange(val) {
      this.$emit('update:checkList', val)
    },
    // 远程排序
    sortChange({ column, prop, order }) {
      console.log(column, prop, order)
      const sort_by = column.sortBy
      console.log(sort_by)
    },
    getTableList() {
      // 判断是否有url地址
      const url = this.url
      if (!url) {
        console.log('地址不存在')
        return false
      }
      const data = {
        url: this.url,
        method: this.method
      }
      // 判断是否有请求数据,请求的数据是data还是params
      if (JSON.stringify(this.data) !== '{}') {
        data.data = this.data
      }
      if (JSON.stringify(this.params) !== '{}') {
        data.params = this.params
      }
      // 接口调用
      request(data).then(response => {
        let request_data = response.data.records
        // 数据格式化
        if (this.format && typeof this.format === 'function') {
          request_data = this.format(response.data.records)
        }
        this.tableData = request_data
        // 回调数据
        this.onLoad && this.$emit('onload', response.data)
      })
    },
    // 手动调用及修改数据,父组件使用ref调用
    handlerRequset() {
      this.getTableList()
    }
  }
}

</script>
<style lang='less' scoped>
</style>
